<template>
  <div class="match-detail" v-if="match">
    <div class="back-button" @click="goBack">
      <span>←</span> 返回列表
    </div>
    
    <div class="match-header">
      <div class="match-info">
        <span class="time">{{ match.time }}</span>
        <span class="status" :class="match.status.toLowerCase()">{{ match.status }}</span>
      </div>
      <div class="teams">
        <div class="team home">
          <h2>{{ match.homeTeam }}</h2>
          <div class="score">{{ match.score.split(':')[0] }}</div>
        </div>
        <div class="vs">
          <span class="vs-text">VS</span>
          <div class="score-divider">:</div>
        </div>
        <div class="team away">
          <h2>{{ match.awayTeam }}</h2>
          <div class="score">{{ match.score.split(':')[1] }}</div>
        </div>
      </div>
    </div>

    <div class="odds-container">
      <div class="odds-grid">
        <!-- 让球盘 -->
        <div class="odds-section">
          <h3>RQP</h3>
          <div class="odds-content">
            <div class="odds-values">
              <div class="odds-row" 
                   v-for="(value, index) in match.handicapValues"
                   :key="index"
                   :class="{ active: selectedHandicap === index }"
                   @click="selectedHandicap = index">
                <div class="handicap-value">{{ value }}</div>
                <div class="odds-sides">
                  <div class="odds-side">
                    <div class="odds-value" :class="{
                      'trend-up': match.handicapTrends[index].home === 'up',
                      'trend-down': match.handicapTrends[index].home === 'down'
                    }">{{ match.handicapOddsList[index].home }}</div>
                    <div class="odds-label">ZD</div>
                  </div>
                  <div class="odds-side">
                    <div class="odds-value" :class="{
                      'trend-up': match.handicapTrends[index].away === 'up',
                      'trend-down': match.handicapTrends[index].away === 'down'
                    }">{{ match.handicapOddsList[index].away }}</div>
                    <div class="odds-label">KD</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 大小球 -->
        <div class="odds-section">
          <h3>DX</h3>
          <div class="odds-content">
            <div class="odds-values">
              <div class="odds-row"
                   v-for="(value, index) in match.totalValues"
                   :key="index"
                   :class="{ active: selectedTotal === index }"
                   @click="selectedTotal = index">
                <div class="handicap-value">{{ value }}</div>
                <div class="odds-sides">
                  <div class="odds-side">
                    <div class="odds-value" :class="{
                      'trend-up': match.totalTrends[index].over === 'up',
                      'trend-down': match.totalTrends[index].over === 'down'
                    }">{{ match.totalOddsList[index].over }}</div>
                    <div class="odds-label">D</div>
                  </div>
                  <div class="odds-side">
                    <div class="odds-value" :class="{
                      'trend-up': match.totalTrends[index].under === 'up',
                      'trend-down': match.totalTrends[index].under === 'down'
                    }">{{ match.totalOddsList[index].under }}</div>
                    <div class="odds-label">X</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 独赢 -->
        <div class="odds-section">
          <h3>DY</h3>
          <div class="odds-content">
            <div class="odds-values">
              <div class="odds-row">
                <div class="odds-sides moneyline">
                  <div class="odds-side">
                    <div class="odds-value" :class="{
                      'trend-up': match.moneylineTrends?.home === 'up',
                      'trend-down': match.moneylineTrends?.home === 'down'
                    }">{{ match.moneylineOdds?.home }}</div>
                    <div class="odds-label">ZS</div>
                  </div>
                  <div class="odds-side">
                    <div class="odds-value" :class="{
                      'trend-up': match.moneylineTrends?.draw === 'up',
                      'trend-down': match.moneylineTrends?.draw === 'down'
                    }">{{ match.moneylineOdds?.draw }}</div>
                    <div class="odds-label">HJ</div>
                  </div>
                  <div class="odds-side">
                    <div class="odds-value" :class="{
                      'trend-up': match.moneylineTrends?.away === 'up',
                      'trend-down': match.moneylineTrends?.away === 'down'
                    }">{{ match.moneylineOdds?.away }}</div>
                    <div class="odds-label">KS</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="match-stats">
      <h3>比赛数据</h3>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-values">
            <span class="home-value">55%</span>
            <span class="stat-label">控球率</span>
            <span class="away-value">45%</span>
          </div>
          <div class="stat-bar">
            <div class="bar home" style="width: 55%"></div>
            <div class="bar away" style="width: 45%"></div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-values">
            <span class="home-value">12</span>
            <span class="stat-label">射门</span>
            <span class="away-value">8</span>
          </div>
          <div class="stat-bar">
            <div class="bar home" style="width: 60%"></div>
            <div class="bar away" style="width: 40%"></div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-values">
            <span class="home-value">6</span>
            <span class="stat-label">射正</span>
            <span class="away-value">3</span>
          </div>
          <div class="stat-bar">
            <div class="bar home" style="width: 65%"></div>
            <div class="bar away" style="width: 35%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const match = ref(null)
const selectedHandicap = ref(0)
const selectedTotal = ref(0)
const activeTab = ref('handicap')

// 模拟获取比赛详情数据
onMounted(() => {
  // 实际应用中这里应该从API获取数据
  match.value = {
    id: route.params.id,
    homeTeam: 'ML',
    awayTeam: 'LW',
    time: '2024-03-10 20:00',
    status: 'LIVE',
    score: '1 : 0',
    handicapValues: ['-0.5', '-0.75', '-1'],
    handicapOddsList: [
      { home: '1.95', away: '1.85' },
      { home: '2.05', away: '1.75' },
      { home: '2.15', away: '1.65' }
    ],
    handicapTrends: [
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' },
      { home: 'stable', away: 'stable' }
    ],
    handicapHistories: [
      {
        home: [1.90, 1.95, 1.93, 1.95],
        away: [1.85, 1.83, 1.85, 1.85]
      },
      {
        home: [2.00, 2.05, 2.03, 2.05],
        away: [1.75, 1.73, 1.75, 1.75]
      },
      {
        home: [2.10, 2.15, 2.13, 2.15],
        away: [1.65, 1.63, 1.65, 1.65]
      }
    ],
    totalValues: ['2.0', '2.25', '2.5'],
    totalOddsList: [
      { over: '1.90', under: '1.90' },
      { over: '1.95', under: '1.85' },
      { over: '2.00', under: '1.80' }
    ],
    totalTrends: [
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' },
      { over: 'stable', under: 'stable' }
    ],
    totalHistories: [
      {
        over: [1.88, 1.90, 1.92, 1.90],
        under: [1.92, 1.90, 1.88, 1.90]
      },
      {
        over: [1.93, 1.95, 1.97, 1.95],
        under: [1.87, 1.85, 1.83, 1.85]
      },
      {
        over: [1.98, 2.00, 2.02, 2.00],
        under: [1.82, 1.80, 1.78, 1.80]
      }
    ],
    moneylineOdds: {
      home: '2.15',
      draw: '3.20',
      away: '3.50'
    },
    moneylineTrends: {
      home: 'stable',
      draw: 'stable',
      away: 'stable'
    },
    moneylineHistory: {
      home: [2.10, 2.15, 2.13, 2.15],
      draw: [3.15, 3.20, 3.18, 3.20],
      away: [3.45, 3.50, 3.48, 3.50]
    }
  }

  // 模拟实时更新
  startOddsUpdate()
})

const startOddsUpdate = () => {
  oddsInterval = setInterval(() => {
    if (match.value && match.value.status === 'LIVE') {
      updateOdds()
    }
  }, 2000)
}

const updateOdds = () => {
  if (!match.value) return

  // 更新让球赔率
  const handicapChange = (Math.random() * 0.1 - 0.05)
  match.value.handicapOddsList[selectedHandicap.value].home = 
    (parseFloat(match.value.handicapOddsList[selectedHandicap.value].home) + handicapChange).toFixed(2)
  match.value.handicapTrends[selectedHandicap.value].home = handicapChange > 0 ? 'up' : 'down'
  
  setTimeout(() => {
    if (match.value) match.value.handicapTrends[selectedHandicap.value].home = 'stable'
  }, 2000)

  // 更新大小球赔率
  const totalChange = (Math.random() * 0.1 - 0.05)
  match.value.totalOddsList[selectedTotal.value].over = 
    (parseFloat(match.value.totalOddsList[selectedTotal.value].over) + totalChange).toFixed(2)
  match.value.totalTrends[selectedTotal.value].over = totalChange > 0 ? 'up' : 'down'
  
  setTimeout(() => {
    if (match.value) match.value.totalTrends[selectedTotal.value].over = 'stable'
  }, 2000)

  // 更新独赢赔率
  const moneylineChange = (Math.random() * 0.1 - 0.05)
  match.value.moneylineOdds.home = 
    (parseFloat(match.value.moneylineOdds.home) + moneylineChange).toFixed(2)
  match.value.moneylineTrends.home = moneylineChange > 0 ? 'up' : 'down'
  
  setTimeout(() => {
    if (match.value) match.value.moneylineTrends.home = 'stable'
  }, 2000)
}

const getChartHeight = (history) => {
  if (!history) return '50%'
  const max = Math.max(...history)
  const min = Math.min(...history)
  const last = history[history.length - 1]
  return `${((last - min) / (max - min) * 100)}%`
}

const goBack = () => {
  router.push('/football')
}

let oddsInterval
onUnmounted(() => {
  clearInterval(oddsInterval)
})
</script>

<style scoped>
.match-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #e0e0e0;
}

.match-header {
  background: linear-gradient(135deg, #42b983 0%, #2c3e50 100%);
  border-radius: 12px;
  padding: 24px;
  color: white;
  margin: 20px 0;
}

.match-info {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  background-color: rgba(255, 255, 255, 0.2);
}

.teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team {
  text-align: center;
  flex: 1;
}

.team h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.vs-text {
  font-size: 16px;
  opacity: 0.8;
}

.score-divider {
  font-size: 24px;
  font-weight: bold;
  margin-top: 8px;
}

.score {
  font-size: 32px;
  font-weight: bold;
  margin-top: 12px;
}

.odds-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
}

.odds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.odds-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.odds-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 18px;
  text-align: center;
}

.odds-content {
  background-color: white;
  border-radius: 8px;
  padding: 12px;
}

.odds-values {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.odds-row {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odds-row:hover {
  background-color: #f0f0f0;
}

.odds-row.active {
  background-color: #e8f5e9;
  border: 1px solid #42b983;
}

.handicap-value {
  text-align: center;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 8px;
}

.odds-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.odds-sides.moneyline {
  grid-template-columns: 1fr 1fr 1fr;
}

.odds-side {
  text-align: center;
}

.odds-value {
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s ease;
  color: #2c3e50;
}

.odds-label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.trend-up {
  color: #f44336;
}

.trend-down {
  color: #4CAF50;
}

.match-stats {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.match-stats h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.stats-grid {
  display: grid;
  gap: 16px;
}

.stat-item {
  padding: 12px 0;
}

.stat-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.home-value,
.away-value {
  font-weight: bold;
  color: #2c3e50;
}

.stat-bar {
  display: flex;
  height: 6px;
  background-color: #f5f5f5;
  border-radius: 3px;
  overflow: hidden;
}

.bar {
  transition: width 0.3s ease;
}

.bar.home {
  background-color: #42b983;
}

.bar.away {
  background-color: #2c3e50;
}
</style> 